{% extends 'universal/myself_base.html' %}{# 注意父文件在universal文件夹内，不是templates文件夹内 #}
{% block title %}用户注册{% endblock %}
{% block page_content %}
    {{ wtf.quick_form(form) }}{# 父文件里已导入wtf #}
{% endblock %}
{% block scripts %}
    {{ super() }}
    <script>
        $(function (){ //使用jQuery时，JavaScript代码直接写在$()内
            //如果将添加span的代码写在blur()内(如一开始我写在let s=_this.next('span')之前)，则每次失去焦点都会创建一个span，导致清除上次的提示时只能清除前一个span的内容，多次失去焦点便产生大量空span和多条提示。所以先创建span，再根据需要清空或写入内容
            $('#phone').after('<span></span>') //添加span用于显示提示信息。append()是向每个匹配的元素内部追加内容，after()是在每个匹配的元素之后插入内容。from jQuery手册
            $('#phone').blur(function (){ //$('#phone')是获取id为phone的input框(已由wtf渲染出来)，blur()是失去焦点
                //var是函数作用域，let是块作用域；let不能在定义之前访问该变量，但是var可以；let不能被重新定义，但是var可以
                let phone_number=$(this).val() //定义phone_number变量，将input框的内容赋给phone_number变量。val()返回表单中value的内容，获取表单value不能用text()或html()，它们用来获取标签内容。from https://www.cnblogs.com/tiandi/p/12119191.html和https://blog.csdn.net/RoyalLAW/article/details/106481738
                let _this=$(this) //post的function里无法直接使用$(this)，需先保存到临时变量，这是jQuery写法；或直接用$('#phone')，无需临时变量。这里如果写let _this=this，这是js原生写法，则post的function里需用$(_this)。
                if (phone_number.length==11){ //也可以用正则判断，但这里目的是去数据库里查是否已被使用，所以简单判断长度。短信登录处手机号用的正则
                    //_this.next('span').text('') //清除上次的提示，放在这里触发提示时会闪烁一下，用户体验不如写在下面
                    $.post("{{ url_for('user.verify_phone') }}",{phone:phone_number},function (data){ //发送Ajax请求(这里用POST时接收也用POST，即user.py中路由verify_phone，GET同理。Ajax请求的GET和POST区别https://www.zhihu.com/question/28586791)，第一个参数是请求地址，第二个参数是待发送数据(需是字典)，第三个参数是发送成功时执行的函数(参数是Ajax请求接收处的返回值)。from https://jquery.cuishifeng.cn/jQuery.post.html或https://www.w3school.com.cn/jquery/ajax_post.asp
                        if (data.flag!=1){
                            let s=_this.next('span') //获取紧邻当前输入框的后面的同级span
                            s.css({'color':'red','font-size':'14px'}) //格式from jQuery手册。css代码也可以写在block styles内，并放在<style>标签里，就像这段js代码放在block scripts内，并放在<script>标签里，都要加super()
                            s.text('') //清除上次的提示，也可以放在发送Ajax请求之前，但触发提示时会闪烁一下，用户体验不如写在这里
                            s.text(data.message)
                        }else {
                            _this.next('span').text('') //手机号由错误的格式改为正确的格式，或由已被使用的号码改为未被使用的号码时，清除之前错误时的提示
                        }
                    })
                }else {
                    $(this).next('span').css({'color':'red','font-size':'14px'})
                    $(this).next('span').text('')
                    $(this).next('span').text('手机号格式不正确')
                }
            })
            $('#recaptcha').after('<img src=\"{{ url_for("user.verification_code_image") }}\" id=\"img\" alt=\"验证码图片加载失败\" />') //复制的login.html
            $('#img').click(function (){ //复制的login.html
                $(this).attr('src',"{{ url_for('user.verification_code_image') }}?ran="+Math.random())
            })
        })
    </script>
{% endblock %}